<template>
  <!--不是测试文件-->
  <div class="form">
    <el-form label-position="top" label-width="80px" :model="queryForm">
      <el-form-item label="url">
        <el-input v-model="queryForm.url"></el-input>
      </el-form-item>

      <el-form-item label="body">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 40}"
          placeholder="请输入内容"
          v-model="queryForm.body">
        </el-input>
      </el-form-item>

      <div style="text-align: right;">
        <el-form-item>
          <el-button type="primary" @click="onTest">测试请求</el-button>
          <el-button @click="onClose">取消</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div>
      <div>响应:</div>
      <div class="code"><pre>{{reponse}}</pre></div>
    </div>
  </div>
</template>

<script>
import api from '@/api'

export default {
  name: 'curd-query-test',
  components: {
  },
  props: {
    id: {
      type: Number
    }
  },
  data () {
    return {
      queryForm: {
        url: '',
        body: ''
      },
      reponse: '',
      randomKey: 0
    }
  },
  mounted () {
    this.getById()
  },
  methods: {
    onTest () {
      api.sysCurd.testQuery(this.queryForm.url, this.queryForm.body).then(res => {
        console.log(res)
        this.reponse = res
      })
    },
    getById () {
      if (this.id === 0 || !this.id) {
        return
      }
      var param = { id: this.id }
      api.sysCurd.sysCurdFindById(param).then(res => {
        this.queryForm.url = '/curd/query/data/getPageList/' + res.name + '?page=0&size=10'
      })
    },
    onClose () {
      this.$emit('closeDrawer')
    }
  }
}
</script>

<style lang="scss">
  .form {
    padding: 10px;
  }
  .code {
    width: 100%;
    min-height: 100px;
    border: 1px solid #DCDFE6;
    margin-top: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
  }
</style>
